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CREATING AND USING 
BACKGROUND IMAGES 


Preparing Web Page Backgrounds 


In this chapter, you will: 
Use painting tools 
* Work with layers 
è Use filters in Photoshop and ImageReady 
è Design background images 
è Use background images with HTML and CSS 


O: of the quickest ways to add interest to a Web page is to use a col- 
ored background. Although Hypertext Markup Language (HTML) 
makes it easy to color a background, it limits you to using backgrounds of 
one solid color. Fortunately, browsers also support the use of images in 
backgrounds. Many Web designers use background images because they are 
easy to use and have an immediate visual impact. As with most design ele- 
ments, however, background images can be overused, creating Web pages 
that are difficult to read. 


Creating a background image gives you an opportunity to be creative. You can 
use any Web graphic, edit existing images, and generate new ones. To work 
with background images, you need to be comfortable with image-editing soft- 
ware features, including painting tools, image filters, and layers. This chapter 
focuses on using Adobe Photoshop to create background images. 


After developing a background graphic, you must use HTML or Cascading 
Style Sheets (CSS) to insert it into a Web page. This chapter defines back- 
grounds and explains how to use them in tables with both HTML and CSS. 
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UsING PAINTING TOOLS 


The Photoshop paint tools include the Eraser, Pencil, Airbrush, Paintbrush, Clone 
Stamp, Pattern Stamp, Smudge, Blur, Sharpen, Dodge, Burn, and Sponge. You apply each 
of these tools with a brush that varies in size and shape and leaves a mark when you 
drag it across an image. If you have already used a painting program, such as MacPaint 
or Windows Paint, most of the icons and conventions in the Photoshop paint tools will 
be familiar to you. In addition to these common features, Photoshop and ImageReady 
let you precisely control how these tools work. 


To use a painting tool, you select it from the toolbox and then change its options to 
suit your task. You change options for the painting tools in the Options bar, shown in 
Figure 5-1. 


Select a brush or change 
brush settings 


Select a blending mode 


Adjust the opacity of the 
brush mark 


Use the Wet Edges option 


| Adjust Brush Dynamics 
m] | ce 4 E] settings 


Figure 5-4 The Options bar with the Paintbrush tool selected 
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Using the Editing Brushes 


The Brush palette contains many predefined brushes of different sizes and shapes. 
Some are round and others have spatter patterns. To select a brush, first click the 
inverted triangle next to the brush sample to open the Brush palette, and then click 
the brush you want. You also can create and edit your own brushes. To do so, open the 
Brush palette menu, and then click New Brush. In the New Brush dialog box, set the 
brush options. 


If you want more control over the brush you selected, or want to edit the settings, click 
the icon in the Brush box in the Options bar. The Brush Options dialog box opens, as 
illustrated in Figure 5-2, where you can change the settings. The changes you make affect 
only the selected brush. 
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Figure 5-2 The Brush Options dialog box 


Each option in the Brush Options dialog box is explained in the following list: 
a Diameter is the width of the brush head measured in pixels. 


a Hardness determines the softness of the brush mark. A setting of 100% means 
that the brush mark has a hard, unfeathered edge. A setting of 0% makes the 
mark very soft, fading from opaque at the center to transparent at the edge. 


m Spacing controls whether the brush mark is a solid or dotted line. The spacing 
value refers to the size of the space between dots.A value of 25% produces a 
normal, solid line, while a value of 100% produces a dotted line, with the dots 
and the distance between them evenly spaced. A value of 1% produces an 
extra-thick feathered line. 


= Roundness of the brush can vary from 100% (perfectly round) to 0% 
(a flat line). A flat brush is useful for producing calligraphic effects. 


a The Angle setting applies only if you change the Roundness of the brush 
head. If the brush head is an ellipse, the angle determines the brush head’s 
orientation, such as horizontal or vertical. 


Use the options in the Brush Options dialog box to create elliptical brush heads. Brushes 
can be any shape, however, including a random shape such as the spatter brush, or a cus- 
tom shape based on part of an image. You can use an image-based brush to apply the image 
anywhere you click the brush. In the following steps, you create such a custom shape. 


To create a custom shape based on part of an image: 


1. Select the Rectangular Marquee tool. In the Options bar, make sure the 
Feather value is set to 0. 


2. Select an area of an image with the Rectangular Marquee tool. 


3. Click Edit on the menu bar, and then click Define Brush. Photoshop 
adds a new brush to the palette, based on the selection area. The new 
brush contains no color information; the color of its mark is determined 
by the current foreground color. 
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Using Blending Modes 


In the Options bar you can select a mode for blending the effect of the Paintbrush tool 
with the existing image. The Blending mode controls how the painting tool affects the 
pixels it paints. The base color in the image combines with the foreground color, or 
blend color, and produces the result color. The default is the Normal mode, which 
replaces the base color with the blend color. For special effects, you can use one of the 
other 17 modes that lighten or darken the image in various ways. 


Each setting in the Options palette is explained in the lists following the next four fig- 
ures. Figure 5-3 shows a graphic with Dissolve, Multiply, Screen, and Overlay effects. 
Figure 5-4 shows the same graphic with Soft Light, Hard Light, Color Dodge, and Color 
Burn effects. The Darken, Lighten, Difference, and Exclusion modes are illustrated in 
Figure 5-5. The Hue, Color, Saturation, and Luminosity modes are illustrated in Figure 5-6. 
To better illustrate the results of using these modes, the figures show an entire image 
with the different modes applied. 


<— Dissolve 


+ Multiply 


~ +——— Screen 


+—— Overlay 


Figure 5-3 The Dissolve, Multiply, Screen, and Overlay effects 


m The Dissolve mode displays opacity as a spatter pattern. The effect is most 
obvious with a layer of opacity around 50%. 


a The Behind mode paints only on the transparent part of a layer. This mode 
has no effect on images that already contain white or colored pixels, and is 
not shown in the figure. 


a The Multiply mode combines the base color and the blend color. If either 
color is black, the resulting color is also black; mixing with white does not 
change it. This mode usually produces a darker color than the blend color. 


a The Screen mode is the same as the Multiply mode, but it inverts the blend and 
base colors, producing a lighter color. To invert means to use the opposite hue on 
the color wheel. For example, invert to use cyan for red or yellow for blue. 
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a The Overlay mode is similar to Normal mode with an opacity of 50%, but 
does not affect white and black pixels. 


Soft Light 


© Hard Light 


— Color Burn 


Figure 5-4 The Soft Light, Hard Light, Color Dodge, and Color Burn effects 
= The Soft Light and Hard Light modes boost contrast, by lightening light 
colors and darkening dark ones. The Hard Light mode has a stronger effect. 


a The Color Dodge mode lightens the base colors toward the blend color, 
ignoring black pixels. 


= The Color Burn mode darkens the base colors toward the blend color, 
ignoring white pixels. 
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Figure 5-5 The Darken, Lighten, Difference, and Exclusion effects 


=u The Darken mode compares the base and blend colors, and then applies the 
darker of the two. 
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a The Lighten mode compares the base and blend colors, and then applies the 
lighter of the two. 


a The Difference and Exclusion modes compare the base and blend colors and 
subtract the darker from the lighter. This is not the same as inverting the colors, 
but it looks similar. The Difference mode produces slightly higher contrast. 


Hue 


Saturation 


Color 


Luminosity 


Figure 5-6 The Hue, Color, Saturation, and Luminosity effects 


= The Hue and Color modes produce an effect similar to using the 


Colorize feature in the Hue/Saturation dialog box, except that the blend 
color determines the hue. 


a The Saturation mode produces the same effect as using the Saturation slider 
in the Hue/Saturation dialog box. Both make the saturation of the image 
more like the saturation of the blend color. 


a The Luminosity mode preserves the hue and saturation of the original 
colors, but changes the brightness to that of the blend color. 


Changing Brush Mark Opacity 


Opacity refers to the transparency of the brush mark. A setting of 100% opacity is fully 
opaque; 0% opacity is fully transparent. Fully opaque brushes produce simple brush 
marks. More transparent ones produce brush marks like those created by watercolors. 


Using Wet Edges 


When the Paintbrush tool is set to the Normal mode, the Wet Edges check box is avail- 
able in the Options bar. Selecting the Wet Edges box lets you create a watercolor effect, 
so the edges of the brush mark are darker than the interior. Figure 5-7 shows marks 
made by the Paintbrush tool with and without Wet Edges selected. 
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In Figure 5-7, the two brush marks on the left have opacity set to 100%. The two on 
the right have opacity set to 50%. 


Wet Edges deselected 


J Opacity set to 50% 


Opacity set to 100% 


J Se. AS Wet Edges selected 


Figure 5-7 Changing opacity and using Wet Edges 


Changing Brush Dynamics 


Photoshop and ImageReady let you create dynamic effects—those that change over 
time—with brush marks. To change brush dynamics, click the brush list arrow in the far 
right of the Options bar, and then click an effect. For example, click Fade and set the 
brush size to fade over 10 steps, which means that the brush mark shrinks from full-size 
to nothing over 10 steps. Each step equals the size of one brush head. Depending on the 
brush tool you select, you also can set dynamic effects for color and opacity. The results 
of these different settings are shown in Figure 5-8. 


a J) No Fade 
~ Fading size over 70 steps 


~~. <—— Fading opacity over 40 steps 
eT Fading color over 40 steps 


Figure 5-8 Different brush dynamics 


If you are using a tablet to draw in Photoshop, you can set the stylus to control 
gt brush dynamics. To do so, click the Brush Dynamics button in the options bar to 


open the Brush Dynamics dialog box. Then set size, opacity, or color to stylus. 
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Changing the Cursor 


You can edit preferences in Photoshop to control the shape of the pointer used with the 
Paintbrush tools. 


To edit preferences: 


1. Click Edit on the menu bar, point to Preferences, and then click Display 
& Cursors to open the Preference dialog box, illustrated in Figure 5-9. 


2. Select a pointer style. Choose Standard to use the Paintbrush icon as the 
pointer. Choose Precise to use a crosshair pointer. Choose Brush Size to 
use the selected brush icon as the pointer. 


Only the Brush Size pointer visually indicates the size and shape of the 
brush mark. You also can toggle between the Precise and Brush Size 
pointer by pressing the Caps Lock key. 


Preferences 


Display & Cursors 


F x 


One 


Figure 5-9 Selecting a pointer style in the Preferences dialog box 


WORKING WITH LAYERS 


Adobe added the layers feature to Photoshop (version 4) to meet the needs of graphic 
artists and designers. Layers are so useful in image editing that they have their own 
palette window and menu. Think of a layer as a sheet of clear plastic. You can paint it, 
and the area not covered by paint stays transparent. You can have many layers stacked on 
top of each other, with a different graphical element on each layer. Having distinct lay- 
ers lets you rotate, color, and manipulate each element separately, without affecting the 
others. For example, if your complete graphic includes images of a mountain, sun, and 
hawk, you can store each image on a separate layer, and then change only one image, 
such as the hawk, without affecting the mountain or sun. 
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Creating Layers 


Create a layer when you want to store an image on it. Every image has a default back- 
ground layer. The easiest way to add a new layer is to copy an area in the image and then 
paste it. Instead of incorporating the pasted graphic into the existing image, Photoshop 
creates a layer on top of the default layer or background layer. You also can create an 
empty layer: click the right triangle in the Layers palette, and then click New Layer. (You 
also can click Layer on the menu bar, point to New, and then click Layer, or click the 
Create New Layer icon at the bottom of the Layers palette.) After you create a layer, you 
can set the layer options, which are illustrated in Figure 5-10. 


Visibility icons 
Select blending mode 
Lock transparent pixels 


Lock opaque pixels 


Lock position 


Lock the whole layer 
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Linked layer 
Locked layer 


Create set 
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Add fill layer 
Add layer mask 


Add a layer style 


Figure 5-10 The Layers palette 


Setting Layer Opacity 


Use the Opacity text box in the Layers palette to control the transparency of a layer. A 
setting of 0% opacity means that the layer is fully transparent and the colored pixels in 
the layer are invisible. A setting of 100% opacity means that the layer is fully opaque and 
the elements in the layer completely obscure the layers behind it. However, even a fully 
opaque layer can contain transparent areas that make lower layers visible. 
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Using Modes 


The mode of a layer determines how it blends with the layers below it. The modes for lay- 
ers are the same as those for the Painting tools (see Using Blending Modes earlier in this 
chapter). Layer modes differ in how they affect the layer’s appearance. You change a layer’s 
blending mode only when you want to create complex effects; Normal mode is adequate 
for most projects. Still, you should experiment with the different modes to see their effects. 
Note that you cannot adjust the opacity or mode of the base background layer. 


Locking Layers 


Near the top of the Layers palette are check boxes for locking the transparent pixels, 
image pixels or position of a layer, or to lock the entire layer itself. You check a box to 
prevent the particular layer part from being edited, as described in the following list: 


a Locking transparent pixels means that only colored pixels change when you use 
a tool or filter. This is the same action as selecting all nontransparent pixels 
with the Magic Wand tool. 


m Locking image pixels has the reverse effect of locking transparent pixels—only 
transparent pixels are affected by tools or filters. 


a Locking position prevents the layer from being moved with the Move tool. 


a Locking all prevents any edits to the layer, although you still can move the 
layer in the stacking order of the Layers palette. 


Setting Visibility 


On the far left of each layer row in the Layers palette is a check box for visibility, indi- 
cated with an icon of an eye. Use the Visibility check box to toggle a layer between 
0% opacity and the value set in the Opacity window. Click the eye icon in a layer’s row 
of the Layers palette to show or hide the layer. Hiding one layer lets you see how other 
layers look without the selected layer blocking the view. 


Linking Layers 


The selected layer is indicated by a paintbrush icon next to the image preview in the 
Layers palette. Clicking the second box in an unselected layer’s row adds a chain icon 
to the box, indicating that the two layers are linked. Linked layers accept modifications 
you make to other layers in the same chain. If you rotate or apply a filter to one of the 
linked layers, for example, all the other linked layers change as well. 
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Adding Other Layer Options 


You can add layer effects to any layer other than the background layer. Other layer 
options are described in the following list: 


m Click the Add Layer Style button at the bottom of the Layers palette to add 
styles such as Drop Shadow, Bevel, and Emboss. (Layer styles are covered in 
detail in the “Creating and Using Buttons” chapter.) 


a Click the Add Mask button at the bottom of the Layers palette to create a 
new mask. This creates a new channel, visible in the Channels palette, that 
selectively hides areas of layers behind it. 


m Click the New Set button to create a new layer set. Layer sets are similar to 
folders containing layers. If you have many layers in an image, it is convenient 
to organize them in separate sets. 


a Click the New Fill or Adjustment Layer button to add special layers you use 
for experimenting with color. Fill layers allow you to quickly fill an entire 
layer with a solid color, gradient, or pattern. Adjustment layers allow you to 
add controls such as level adjustment to a separate layer. When visible, these 
layers affect all layers below them in the stacking order. 


Merging Layers 


The GIF and JPEG formats cannot contain layer information, so before you save an image 
in a Web format, you must merge all the layers. Merging layers means combining two or 
more layers into one. By using the Merge Linked command from the Layers palette 
menu, you control which layers merge. If you want to merge all the layers into one, you 
use the Flatten Image command. The Merge Down command merges all layers behind 
the selected layer. The Merge Visible command combines all visible layers. 


To save an image file with layers, you must do so in the proprietary PSD format of 
Photoshop. You must also flatten the layers using the Flatten Image command before you 
can save an image in a Web format. 


Arranging Layers 


You can change the stacking order of your layers to see how the image looks with dif- 
ferent parts in front of or behind other parts of the image. To change the stacking 
order, drag the layer row to the desired position in the Layers palette. You also can click 
Layer on the menu bar and then select options from the Arrange submenu. You can 
bring a layer forward one position or all the way to the front, send it back one posi- 
tion or to the very back. Nothing can be placed behind the background layer, so a 
layer sent to the back is positioned directly above the background layer. 
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Transforming Layers 


The transformation options in the Edit menu apply to the selected area of a layer. If no 
area is selected, the options apply to the entire layer. Click Edit on the menu bar and 
then point to Transform to open the Transform submenu. From there you can select one 
of several options: 


m Scale: Increase or decrease the size of the selection by changing the scale. As 


you drag to scale the image, hold the Shift key to maintain the proportions 
of height and width. 


Rotate: Rotate the selection around a central anchor point by dragging the 
side or corner tabs. You also can drag the central anchor point to a new posi- 
tion to change the center of rotation. 

Figure 5-11 shows a selection being rotated. 


Drag the corner or side tabs to rotate 


The reference point is the axis of the rotation 


Figure 5-11 Rotating around a central anchor point 


Skew: Change the angle of the selection by skewing the sides. Skew maintains 
parallel edges of the selection. 


Distort: Completely change the shape of the selection by dragging any side or 
corner tab. Distort does not maintain parallel edges of the selection. 


Perspective: Simulate 3-D perspective by dragging the corner tabs. The selec- 
tion then appears to recede into the distance. Figure 5-12 shows a selection 
being transformed with skew, distort, and perspective 


Rotate by degree: Rotate the selection in fixed amounts, either 90 degrees 
clockwise or counterclockwise, or 180 degrees. 


Flip: A horizontal flip switches the left and right sides of the selection, 
creating a mirror image of the original selection. A vertical flip switches 
the top and bottom of the selection. Figure 5-13 shows the results of 
rotating and flipping a selection. 
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Skew transformation 
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Figure 5-12 Skewing, distorting, and adding perspective to a selection 
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Figure 5-13 Rotating and flipping a selection 


You also can set your own transformation to produce special effects. 
To set your own transformation: 
1. Select the layer you want to transform. 


2. Click Edit on the menu bar, and then click Free Transform. You see a 
transformation box around the selection. The box has tabs in the corners 
and in the centers of each side and a reference point in the middle. 


3. Drag the tabs to translate, scale, skew, or rotate the layer. When you finish the 
transformation, double-click within the selected area to set the changes. 
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When transforming a layer, the Options bar displays text fields for entering numeric 
values for the transformation, as shown in Figure 5-14. It often is easier to control 
transformations using numeric values than by dragging the selection tabs. 
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Figure 5-14 Transformation options 


The transformation options are explained in the following list: 


a X and Y: Use these text boxes to set the position of the selection. By default 
the values are absolute, measured from the upper-left corner of the image. 
Click the triangle icon between the X and Y fields to use relative positioning 
for moving the reference point. This measures the position of the selection 
relative to its initial position. 


a Wand H: Use these text boxes to set the scale of the selection as a percent- 
age of the original. Adjust the width by changing the W value, and adjust 
the height by changing the H value. A value of 200% doubles the scale, and 
a value of 50% halves it. Click the chain icon to maintain the aspect ratio 
of height and width. This constrains the proportions of height and width so 
that changing one value changes the other by the same amount. 


a Angle icon: Use this icon to control the angle of rotation in degrees. 


H and V: Use these text boxes to control the horizontal and vertical skew 
in degrees. 


m Ok and Cancel buttons: Click the check mark button to set the transformation. 
Click the X button to cancel the transformation. 


The Options bar does not include special fields for distort or perspective. 
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FILTERS IN PHOTOSHOP 


A filter often is called a plug-in. Just as Web browsers use plug-in programs to render 
images, Photoshop uses plug-ins to add visual effects to an edited image. Most filter 
plug-ins work by scanning an image, pixel by pixel, performing a mathematical trans- 
formation as they go. The Blur filter, for example, interpolates the values for every pair 
of adjacent pixels. This reduces the contrast of edges, and makes an image appear softer. 
Filters in Photoshop work only when images are in RGB color or grayscale. 


The benefit of using plug-in filters is that third-party development companies and indi- 
vidual developers can create their own filters and share their work with other users who 
can plug them into Photoshop. Many filters that are now standard in Photoshop were 
originally written by users. Several additional third-party plug-ins also are available on 
the Adobe Web site and elsewhere on the Web. 
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Filter Categories 


Photoshop includes too many filters to cover individually in this book. Most have set- 
tings you can adjust, allowing you to create many different effects. The best way to see 
what individual filters do is to experiment with them on an original image. You already 
have covered some filters, such as Sharpen and NTSC Colors, to solve problems in 
images; other filters produce artistic effects. Photoshop groups filters into nine cate- 
gories, which you access from the Filter menu. 


Artistic filters imitate other media by making the source image appear to 
have been created with traditional techniques like watercolors or colored 

pencils. For example, the Plastic Wrap filter can help you create fire and 
smoke effects. 


Brush Stroke filters also imitate other media with techniques such as 
crosshatching or paint spattering. 


Distort filters do not change the values of pixels as much as translate them 
across and around the image, creating the appearance of ripples and bumps. 


Pixelate filters group similarly colored, adjacent pixels into clusters to create 
mosaic and pointillist effects. 


Render filters are more sophisticated and don’t easily fall into the other 
categories. The Clouds filter generates a cloud pattern using the existing 
Foreground and Background colors. The Difference Clouds filter is simi- 
lar, but combines a cloud pattern with the existing image. 


Sketch filters are similar to the Artistic and Brush Strokes filters, and imitate 
traditional media by adding texture to the original image. The Bas Relief 
filter produces particularly striking and interesting effects. 


Stylize filters add artificial depth by exaggerating the edges in an image. The 
Emboss filter is one of the most popular, and simulates a 3-D engraving of 
the original image. 


Texture filters are combinations of the Pixelate and Sketch filters. They 
group similar pixels into clusters to create texture effects. 
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a The Other filter category includes the Custom filter, which lets you create 
your own filter, and the Offset filter, which lets you preview the edges of tiled 
background images. The effect of the Offset filter is shown in Figure 5-15. The 
remaining filters are advanced and beyond the scope of this book. They include 
Dither Box (to create and apply custom dither patterns), High Pass (to exagger- 
ate edges), Maximum (to enhance the light areas of an image), and Minimum 
(to enhance the dark areas of an image). 


Top edge shifted 
50 pixels down 


Horizontal: fioo] | pixels right 
Vertical: fo pixels down Cancel | 


M Preview Left edge shifted 100 pixels 


Undefined Areas to the right 
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© Repeat Edge Pixels 
© Wrap Around 


Figure 5-145 The Offset filter 


Each filter in the previous list works in one of three ways: 


= Most filters must be applied to an existing image. Running the Glass filter, 
for example, on a white or colored background produces no noticeable 
effect. You can, however, run the Noise filter or draw random lines on a 
blank image to give the filters some image data with which to work. 


a Some filters, however, produce an effect even when applied to a blank image. 
The Patchwork and Conte Crayon filters, which add texture to images and 
solid colors, are two examples of such filters. 


a A few filters completely overwrite any image to which they are applied. For 
example, the Clouds filter replaces the existing image with a new randomized 
cloud pattern. 


Using the Tile Maker Filter 


ImageReady includes one filter in the Other category that Photoshop does not. The Tile 
Maker filter allows you to create seamless background images. When used as a back- 
ground image in a Web page, most images create unattractive seams as they tile across 
and down the page, as illustrated in Figure 5-16. 
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© 


Figure 5-16 Tiled image with visible seams 


Most images create 
seams when tiled 


In Photoshop, you can eliminate the appearance of these seams by blending opposite 
edges or by creating a kaleidoscopic image. This method makes the image tile seam- 
lessly, as shown in figure 5-17. A kaleidoscope is an image that is flipped horizontally 
and vertically so that each edge is a mirror reflection of the opposite edge, as illustrated 
in Figure 5-18. The figure shows how turning the image into a kaleidoscope also 
reduces the appearance of tiling seams. 


S 


Figure 5-17 Blending opposite edges 
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Figure 5-18 Making the image kaleidoscopic 


The Tile Maker filter in ImageReady automates both of these techniques. To open the 
Tile Maker dialog box shown in Figure 5-19, click the Filter menu in ImageReady, 
point to Other, and click Tile Maker. When you select Blend Edges, the filter copies 
the outer edge of the image to the opposite side, fading it into the existing image. 
When you select Kaleidoscope, the filter copies the image, flips it horizontally and 
vertically, and blends these copies with the original to create a symmetric design. 


@ Blend Edges moe 
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Figure 5-19 The Tile Maker filter in ImageReady 


DESIGNING BACKGROUND IMAGES 


Most Web pages include a background image to add visual interest to the page. To cre- 
ate a solid color background, set the background color in HTML. You should use images 
when you want a textured background or a layout that requires large curves, which you 
cannot easily create using HTML tables. 


You can use animated GIFs as background images, but many users find them 
gt annoying. The background should support the overall design, which means keep- 


ing it understated. 
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When designing your background image, consider the page as a whole and how the back- 
ground fits with the other page elements. To achieve the best effects, you should reduce 
contrast, use repetition and tessellation, and find the appropriate dimensions for the image. 


Reducing Contrast 


To read text in a Web page, there must be contrast between the foreground and back- 
ground. To achieve this, you must use a low-contrast background image. A high-contrast 
background makes the foreground text illegible because the text can’t be distinguished 
from the background, as shown in Figure 5-20. Use a low-contrast background to create 
plenty of contrast between the background and the text. Most sites use black text, so light, 
faded backgrounds make text easier to read. Bright, textured background images often 
obscure text. 


+ Netscape 


Komara] 


Figure 5-20 Background images with high and low contrast 


An easy way to reduce contrast is with the Brightness/Contrast dialog box, illustrated 
in Figure 5-21. This dialog box appears when you click Image on the menu bar, point 
to Adjust, and then click Brightness/Contrast. Drag the sliders to lower the contrast and 
raise the brightness. This produces a light, faded image that does not compete with the 
dark text above it. Another way to reduce contrast is to first open the Levels dialog box 
by clicking the Image menu, pointing to Adjust, and clicking Levels. Then raise the value 
of the black Output Level. 
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ti Rockies.tif @ 100% (RGB) 


Brightness/Contrast 


Figure 5-21 Reducing contrast 


Color contrast also helps readability. For example, if you have a dark blue back- 
ground, light yellow text shows up much better than light blue text. The light blue 
text has lightness contrast with the dark blue background, but the yellow has both 
lightness and hue contrast. 


Using Repetition 


Background images, by default, repeat across the page from left to right and top to bot- 
tom. The right edge of one image copy butts up to the left edge of the copy next to 
it, and the bottom and top edges also touch. This effect usually is called wallpapering 
or tiling. Tiling sometimes creates odd or unattractive patterns that aren’t obvious 
when viewing the single untiled image. Tiling is obvious when adjacent edges of the 
tiled image do not match, producing visible seams. The easiest way to avoid this prob- 
lem is to have blank space around the objects in the image. You then avoid having hard 
lines where the tiles touch. Most of the artistry in creating background images is in 
having them repeat without seeming to repeat, and having the repetition be seamless. 


Understanding Tessellation 


Tessellation is a pattern that fits together tightly like a jigsaw puzzle, with no blank 
space left over. To create a tessellated image, like the one shown in Figure 5-22, you need 
to edit the edges of the image, the places where it bumps up against itself, using tools 
such as the Tilemaker or offset filters. The image needs to seem continuous when it tiles 
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across the screen, which means the top and bottom edges have to match, and the left 
and right edges have to match. A tessellated image appears to be one large, continuous 
image when tiled. 


The master of tessellated images is M.C. Escher, a Dutch artist who created 
gi his most famous works using woodcuts—carving a pattern in a flat piece of 


wood, then rolling ink onto the wood and pressing paper against it. 


Seams are invisible 


Figure 5-22 A tessellated image 


Finding the Appropriate Dimensions 


When using a large background image, you should avoid tiling altogether. Imagine that 
your design contains a large curved line that extends from the upper-right of the screen 
to the lower-left, like the one shown in Figure 5-23.The image doesn’t repeat, so you 
cannot create the curved effect with a tiled background. In fact, if your background 
image does tile, your whole design might fail. Users with extra-wide monitors might 
see the left edge of the second tile of your background image. So you want to make 
the background image large enough to spread across the whole monitor, even when the 
monitor is set at full-screen. 


The average monitor size increases every year. To fill the largest screens, a full-page 
background image should now be at least 1280 pixels across. Only someone with an 
even larger monitor would see a full-page background tile to the side. As for height, 
you control page length by how much content you put in. Most pages are longer than 
they are wide, so generally it is easier to use a background that tiles vertically. The 
drawback to using large images is that they also tend to have large file sizes. Although 
the user’s browser caches the image, you still don’t want to force the user to down- 
load large images on the first page. If you use highly patterned or faded images in 
the background, you can heavily optimize the image with no noticeable degradation 
of image quality. 
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= Netscape 


Figure 5-23 Background image that tiles unattractively 


If you have a small tiling area, such as a two-color, 8 X 8 pixel checkerboard like the 
one shown in Figure 5-24, you might think that the ideal image would be a two-color, 
8 x 8 pixel image. The drawback to using such small images is that the browser actually takes 
longer to render them on the screen. An 8 X 8 pixel image on an 800 X 600-pixel window 
would have to tile over 7000 times. Even a browser on a fast computer would take a few 
seconds to display this tiling. A few seconds is too long. A better choice is to stick to back- 
ground images that are at least 30 X 30 pixels. You might have duplicated information, and 
the load time will be a little longer, but the render time will be much faster. In Figure 5-24, 
the image on the left loads slightly faster, but renders much more slowly than the image 
on the right. 


Figure 5-24 Different sizes of a tiled image 
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UsING BACKGROUND IMAGES IN WEB PAGES 


After you create a background image, you need to incorporate it into a Web page. You 
can either use HTML or CSS. 


Defining Backgrounds with HTML 
The simplest type of HTML background is shown below: 
<body BGCOLOR="yellow"> 


This coding sets the BGCOLOR attribute of the BODY tag to yellow. The next easi- 
est background is to add an image to the body. You can use any image you want, but 
remember, it has to be in a Web format such as GIF JPEG, or PNG. 


<body BACKGROUND="my_ background. jpg"> 


This code uses a different attribute, the BACKGROUND attribute. You can use both the 
BGCOLOR and BACKGROUND attributes. If the image failed to load for some reason, 
the background color would appear; otherwise, the image would cover the color altogether. 
If the background image were a GIF image with transparency, the background color would 
show through the image. 


from the rest of the text. However, the new standard for HTML, known as 


HTML tags often are written in uppercase to make them more distinguishable 
gi XHTML, requires that all tags be written in lowercase. 


Using Table Backgrounds with HTML 


All browsers support using backgrounds in the body tag. Modern browsers also support 
the BACKGROUND attribute in table delimiter (TD) tags. 


You use the background attribute in TD tags the same way you do in the BODY tag. In 
the following example, the background image is in a directory called images and appears 
in the left cell of a two-column table. The resulting image is shown in Figure 5-25. 


<table WIDTH="200"> 
<tr> 
<td BACKGROUND="/images/myBackground.gif"> 
some text 
</td> 
<td> 
some other text 
</td> 
</tr> 
</table> 
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3% Netscape 


Figure 5-25 A background image in a table 


Using more than one background image per page usually is considered excessive. 
Background images tend to draw attention away from the actual content of a Web page, 
and multiple background images may distract the reader. If you have a patterned back- 
ground in the body, you probably should not use backgrounds in your tables. If you have 
a solid-color background and want to use a background in a table cell, make it small and 
create the background image with reduced contrast. 


Although all browsers support background images in the body of a Web page, only 
Netscape and Internet Explorer versions 4 (or later) browsers support table backgrounds. 
Therefore, if users with Netscape version 3 visited your page, the background images 
would not be visible. 


The preceding example is why you should use both the BACKGROUND and 
BGCOLOR attributes of the BODY and TD tags; users with older browsers will get 
the color, and users with newer browsers will get the image. 


Using Background Images with CSS 


CSS (Cascading Style Sheets) is a way to define how HTML displays Web pages. You 
use CSS by writing a style sheet inside an HTML document. The style sheet acts as a 
library of instructions for that page. CSS can accomplish all the effects that HTML can, 
plus many more. 
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Using style sheets to add backgrounds to Web pages has two advantages: You can con- 
trol how the tiling repeats, and you can add backgrounds to additional block elements. 
The basic style sheet to assign a background image to the BODY tag looks like this: 


<style TYPE="text\css"> 
<!- 
body { 
background-image: url(images/my_image.jpg) 


//-—> 
</style> 


This code can appear anywhere in the HTML document but is placed conventionally 
between the HEAD tags. The style sheet sets the background-image attribute of the BODY 
tag to the file named my_image.jpg, inside the directory named images. The url in the code 
tells the browser to expect a filename, as opposed to a numeric value. Once the style sheet 
is in place, you don’t have to declare anything special with the BODY tag. 


Using Background Images in Tables with CSS 


If you want to add a background image to a table cell after adding one to the body, 
you might be tempted to create a style sheet declaration for the TD tag that looks just 
like the one for the BODY tag.The problem with this method is that every table cell 
on the page will then have the same background image. In most cases you won’t want 
to use this approach. 


Every Web page has exactly one BODY tag, so you can directly declare the attributes of 
the element. With tags such as TD, however, youre better off declaring a class in the style 
sheet that you then refer to explicitly in the TD tag. The class contains a definition for 
how a tag should appear, but is not associated with any particular tag in the style sheet. 
Only when a tag calls the class does it follow the class definition. 


Here’s an example: 


<style TYPE="text\css"> 

<!— 

body {background-image: url(images/my_image.jpg)} 
.bgimage {background-image: url(images/my_image2.jpg)} 
//—> 

</style> 


The class in the above example has the arbitrary name of .bgimage. The browser knows 
it’s a class because a period occurs before the name. This class is set to another image in 
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the images directory named my_image2.jpg.To use this class, you simply add the CLASS 
attribute to the appropriate TD tags: 


<table WIDTH="200"> 
<tr> 
<td CLASS="bgimage"> 
some text 
</td> 
<td> 
some other text 
</td> 
</tr> 
</table> 


This code creates a table with two cells, the left one with a background image. Note 
that when the class name is used as a value, the period is dropped from the name. Now 
that you have this class, you can assign it to any block element, including paragraphs (P), 
headers (H1, H2, and so on), and block quotes. You don’t need to change the style sheet; 
just add the class attribute to the appropriate tag. 


Controlling Repetition with Style Sheets 


In addition to assigning backgrounds to other block elements, style sheets allow you to 
determine how a background image repeats in a Web page. Recall that by default, all 
background images tile across the screen from left to right and top to bottom. You can 
use CSS to force the background to repeat only horizontally or vertically. 


The following style sheet uses the background-repeat attribute to control how the back- 
ground image tiles: 


<style TYPE="text/css"> 

<!— 

body { 

background-image: url(my_image.jpg); 
background-repeat: repeat-y; 


} 
//—> 
</style> 


In the preceding example, the background-repeat attribute is set to the value of repeat-y, 
which tells the browser to tile the image only along the y-axis (up and down, but not 
across). To create a page with a white background and a patterned column on the left, 
you could create a two-color image that is 1280 pixels wide and just a few pixels high. 
The image would repeat down the page, creating the colored column on the left. 


The drawback to this method is that you have to use a large image, even though all but the 
strip on the left is solid white. Modern browsers allow a better solution. Using style 
sheets, you can create columns without all the extra white area on the side. Just create 
the image for the patterned column, create a style sheet that uses the background-repeat 
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attribute of the body element, and set the value to repeat-y. The result of this technique 
is shown in Figure 5-26. 
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Figure 5-26 Tiling a background image in one direction 
Although background is an attribute of the BODY tag, and background-image is an attribute 
of the body element, you cannot switch them around. For example, you could not use: 


<body BACKGROUND="my_image.jpg" background-repeat: 
repeat-y> 


Also note how the style sheets use colons (:) instead of equals signs (=) to set values. 


CHAPTER SUMMARY 


o Every image-editing program offers painting tools to apply color or lines to an 
image. Photoshop adds options such as opacity and different blending modes to 
its painting tools. 


a You can save any selected area as a brush, and then use the brush to create 
repeated patterns. 


a Layers are like sheets of virtual film with adjustable opacity. Each layer can contain 
different elements of an image. 


a An image file with layers must be saved in the PSD format. You must flatten 
the layers before you can save the image in a Web format. 
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a Photoshop has dozens of creative filters that can be used alone or in combination 
to create thousands of different effects. 


a The Tile Maker filter in ImageReady automates the construction of blended 
and kaleidoscopic images. 


a Your background image should be interesting, but should be low contrast and 
not interfere with the legibility of the text above it. 


a A tiled image may appear to have seams where the edges meet. Eliminate the 
seam to make the image look professional. 


a Using straight HTML, you can add background images to the body and tables 
of Web pages. 


a With style sheets you can add background images to any block element and 
control how the image tiles. 


REVIEW QUESTIONS 


1. Using the Saturation mode with the Paintbrush tool, and black as the foreground 


color is the same as using which tool? 
a. Airbrush 

b. Burn 

c. Dodge 

d. Sponge 


. Which mode can you use to create a spatter effect? 


a. Brush Strokes 
b. Dissolve 
c. Multiply 


d. Screen 


3. Which modes all produce darker images? 


a. Color Burn, Darken, and Multiply 
b. Darken, Multiply, and Screen 
c. Darken, Color Burn, and Overlay 
d. Darken, Overlay, and Screen 


4. Which of the following brush spacing values produces a dotted line in which the 


spaces are twice the size of the brush marks? 
a. 33% 

b. 50% 

c. 100% 

d. 200% 


10. 
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. Which of the following formats allows you to save layers with the image? 


a. GIF 

b. PSD 

c. Both GIF and PSD 

d. Neither GIF nor PSD 


. Which of the following commands can you use to merge all layers together? 


a. Flatten Layers 
b. Merge Visible 
c. Merge Down 
d. All of the above 


. How can you reposition a layer? 


a. With the Free Transform command 

b. With the Translate command in the Transform submenu 
c. With the Move tool 

d. All of the above 


. Which of the following filters allows you to preview the seams produced by a 


tiling image? 
a. Tile Maker 
b. Offset 

c. Custom 

d. Find Edges 


. What could you do if none of the Photoshop filters fit your needs? 


a. Search for third-party filters 

b. Use the Custom filter 

c. Combine multiple filters 

d. Any of the above 

What happens if you run the Clouds filter over a completely red image? 
a. You see a red cloud pattern. 

b. You see white clouds over a blue background. 

c. You see white clouds over a black background. 


d. You see a cloud pattern based on the current foreground and background colors. 
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11. 


12. 


13. 


14. 


15. 


16. 


Many background images don’t need a large color palette. Therefore, what image 
format is usually better for background images? 


a. GIF 

b. JPEG 

c. PNG 

d. Either GIF or JPEG 

What is the easiest way to create a solid orange background? 
a. Set the body’s background attribute to orange. 

b. Usea 1 X 1 pixel orange graphic in the background. 

c. Use a 1280 X 1024 orange graphic in the background. 
d. Any of the above 


If you want to use yellow text on your page, what would be a good 
background image? 


a. One that is mostly light colors 

b. One that is mostly dark colors 

c. You should never use light-colored text, because it is too hard to read. 
d. One that is mostly yellow 

How do you remove the seams in a tiled image? 

a. By blending opposite edges 

b. By turning the image into a kaleidoscopic image 

c. Either a or b 

d. You can never completely remove tile seams. 

What is one of the last steps in creating a background image? 
a. Removing the seams 

b. Selecting the color 

c. Creating the pattern 

d. Reducing the contrast 


Which technique would be inappropriate for removing the seams from a photo- 
graphic background? 


a. Using the Blend Edges feature of the Tile Maker filter in ImageReady 
b. Using the Kaleidoscope feature of the Tile Maker filter in ImageReady 
c. Using the Offset filter and removing the seams with the Smudge tool 
d. Using the Offset filter and removing the seams with the Blur tool 
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17. What is a drawback of using style sheets to assign background images? 
a. No existing browser can display images this way. 
b. Only users with older browsers can see the images. 
c. Only users with newer browsers can see the images. 
d. You don’t know who can or cannot view the images. 
18. Where can you use a background image without using style sheets? 
a. Only in the body background 
b. Only in table backgrounds 
c. In the background of any block element 
d. Only in body and table cell backgrounds 
19. Is background an HTML tag or an attribute? 
a. Tag 
b. Attribute 
c. Either a or b, depending on how you use it 
d. Neither 


20. How would you make a background image tile vertically but not horizontally in 
Netscape version 3? 


a. By setting the background attribute in HTML 
b. By setting the background-repeat attribute in CSS 
c. With either method in a and b 


d. Netscape version 3 cannot tile background images this way. 


HANDS-ON PROJECTS 


All of the following projects use Photoshop and files provided for you in the Chapter05 
folder of your Data Disk, or in the Student Data/Chapter05 folder of your hard drive. 
You can write the HTML or CSS in any HTML or text editor. 


Project 5-1: Create a Striped Background and Put in a Web Page 


You have been using solid-color backgrounds in HTML because your manager does not 
want extra image files to slow the loading of pages. You convince him that a simple striped 
background image will make the pages much more attractive, but will also load quickly. 


Complete these steps: 
1. Create a 30 X 30 pixel image file called stripeBackground. gif. 
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2. Choose your colors. Click the foreground color box to open the Color Picker 
dialog box. In the Web color window next to the pound sign (#), type 009999 
and click OK to produce a teal color. If you’re using an older version of 
Photoshop, type 0 in the R box, 153 in the G box, and 153 in the blue box to 
produce the same teal color. Use white as the background color. 


3. Select the upper-half of the image with the Rectangular Marquee tool. Use the 
rulers to see how much you've selected. 


4. Color the upper-half of the image. Select the Paint Bucket tool. Fill the selected 
area with your foreground color. 


5. Optimize the image. In the Indexed Color dialog box, set the Palette to Exact. 


6. Save the image as stripeBackground.gif in a new directory on your desktop 
named | project_5-1. This image should be small and therefore load quickly, 
even with a slow modem. 


7. In your text editor, open a new file and type the following code: 


<html> 

<body BACKGROUND="stripeBackground.gif"> 
some text 

</body> 

</html> 


8. Save this file as bg-test.html in the project_5-1 folder. 


9. Open your browser and open the new HTML file, bg-test. html. You'll see the 
stripes repeating across and down, covering the entire window. 


10. The text is difficult to read. Add a table with a white background to contain the 
text. Your HTML file should look like this: 


<html> 

<body BACKGROUND="stripeBackground.gif"> 
<table BGCOLOR=" #ffffff"><tr><td> 

<some text 

</td></tr></table> 

</body> 

</html> 


11. Save bg-test.html and refresh your browser. 


Project 5-2: Create a Tessellated Kaleidoscope 


The striped background image you created in Project 5-1 is only a little more interest- 
ing than a solid color. Create a pattern that tiles seamlessly across the page. 


Complete these steps: 
1. Create a 100 X 100 pixel image in Photoshop. 


2. Select a blue foreground color, and scribble over the image with the Paintbrush 
tool, making sure to go over the edge. 
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3. Click Filter on the menu bar, point to Texture, and then click Craquelure. Use 
the default settings or adjust them to create an effect you like. 


4. Save this image as kaleidoscope.jpg in a new folder named project_5-2. 


5. Copy bg-test.html to the new folder, and edit it to make this new image the 
background image. View the HTML file in your browser. You can see that the edges 
are visible where they meet. You can remove the seams by using mirror images of 
the original. 


6. Select the entire image and copy it. 


7. Increase the Canvas Size to 200 X 200, keeping the original image anchored in 
the upper-left corner. 


8. Paste the clipboard selection three times. You see three new layers in the 
Layers palette. 


9. Select Layer 1 in the Layers palette, and move it to the upper-right corner of the 
canvas area. 


10. Click Edit on the menu bar, point to Transform, and then click Flip Horizontal. 


11. Select Layer 2 in the Layers palette, and move it to the lower-left corner of the 
canvas area. 


12. Click Edit on the menu bar, point to Transform, and then click Flip Vertical. 

13. Select Layer 3 in the Layers palette, and move it to the lower-right corner of the 
canvas area. 

14. Click Edit on the menu bar, click Transform, and then click Rotate 180. Now 
all the layers reflect each other vertically and horizontally. 

15. Click Layer on the menu bar, and then click Flatten Image. 


16. Save the image as kaleidoscope.jpg and refresh your browser. The image should 
tile seamlessly. 


Project 5-3: Create a Seamless Photo Tile 


You have been given a photograph to use as a background. You realize you cannot use 
the kaleidoscope technique, because it would create backward and upside-down images. 
Remove the seams by blurring the edges. 


Complete these steps: 

1. Open 5-3.tif from the Data Disk. 

. Click Filter on the menu bar, point to Other, and then click Offset. 

. Set the Horizontal offset to roughly half the width of the image (in this case, 50). 
. Set the Vertical offset to roughly half the height of the image (in this case, 50). 
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. Under Undefined Areas, select Wrap Around. You see the seamed edges as 
they would appear in a tiled background image. 


6. Use the Blur tool to blur the seams. 
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. Use the Smudge tool to smear the edges near the seams, obscuring them. Do not 


smudge outside the canvas area. 


. Use the Levels dialog box to lighten the output levels. 
. Optimize the image, and save it as photo.jpg in a new folder named project_5-3. 


. Copy bg-test.html to the new folder, and edit it to make this new image the 


background image. View the HTML file in your browser. 


Project 5-4: Create a Tiled Photo with ImageReady 


ImageReady can automate the creation of tiled background images. It does not allow 
the same control as the process in the previous project, but it makes the process easier. 


Complete these steps: 


1 
2, 
3: 


In ImageReady, open 5-3.tif from the Data Disk. 
Click Filter on the menu bar, point to Other, and then click Tile Maker. 


In the dialog box that appears, select Blend Edges and set the Width to 10%, 
and check the Resize Tile to Fill Image checkbox. 


. Click OK. Note that the outer 10% of the image has been removed and added to 


the opposite edge, and that the image has been resized accordingly. 


. Trim away the margin of transparent pixels. 
. Optimize and save this image as photo2.jpg in a new folder named project_5-4. 


. Copy bg-test.html to the new folder, and edit it to make this new image the 


background image. View the HTML file in your browser. 


Project 5-5: Create a Large Background Image 


Your client wants a large curved line over the top of the Web page. Style sheets will not 
help with this. You need to use a very large background image that will not tile. 


Complete these steps: 


1. 


Create a 1280 X 1024-pixel image in Photoshop. This image is large enough to 
not tile on most monitors. 


2. Select the Elliptical Marquee tool. 


3. Move the pointer to the 100 X 100-pixel mark, then drag down and to the 


right until you reach the lower-right corner of the canvas area. 


. Use the Rectangular Marquee tool to square off the upper-right corner, the 


lower-right corner, and the lower-left corner of the selection area. 


. Click Select on the menu bar, and then click Inverse. 
. Use the Add Noise filter to add some texture to the selection. 
. Click Filter on the menu bar, point to Sketch, and then click Bas Relief. Use 


the default settings, or adjust them as you like. 
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8. Use the Hue/Saturation dialog box to make the selection green. 
9. This is a large image, but it needs to have a small file size. Optimize it to around 
30K and save it as arc.jpg in a new folder named project_5-5. 


10. Insert the image as the background image in bg-test.html, and preview the page 
in a browser. 


Project 5-6: Create a Patterned Tile 


You need a background that looks like snowflakes. Although you have some snowflake 
images to work with, you do not want to smudge or blur them as the other techniques 
require. You need to create a brush for each type of footprint and paint these seamlessly 
over a background image. 


Complete these steps: 
1. Create a 100 X 100 pixel image and give it a light yellow background. 
. Select a dark blue as the Foreground color. 
. Select the Paintbrush tool. From the Options bar, open the Brush palette. 
. Open the Brush palette menu, select Assorted Brushes, and then click OK. 


. From the Brush palette, select the Snowflake brush icon. 
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. Click the Snowflake brush in the Brushes palette, and type 250 for the Spacing in 
the dialog box that appears. 

7. Drag the pointer across the image from the bottom to the top of the image. You 

should see a line of snowflakes moving up the page. Repeat this step to create 

another line of prints. Try not to go over the edge of the image. 


8. Set the Background color to the yellow in the image, and erase any snowflake 
that is cut off by the edge of the canvas area. 


9. Click Filter on the menu bar, point to Other, and then click Offset. In the dialog 
box that appears, enter the same values as you did for Project 5-3. 


10. Fill in the gaps with more snowflakes, making sure not to paint outside the 
canvas area. 


11. Optimize and save this image as wallpaper.gif in a folder named project_5-6. 


12. Insert the image as the background image in bg-test.html, and preview the page 
in a browser. 


Project 5-7: Use a Background in a Table Using CSS 


You can use style sheets to place backgrounds in table cells, but don’t use the same method 
as you do for the body. If you do, every table cell will have the same background image. 
To control which cells display the background, you need to use a class. 


Complete these steps: 


1. In your text editor, create another HTML file and save it as bg-test2.html in the 
project_5-6 folder. 
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2. Type this code into your file: 


<html 

<head> 

<style TYPE="text/css"> 

<l= 

-bg2 { 

background-image: url(wallpaper.gif); 
background-repeat: repeat-x 


} 
//—> 
</style> 
</head> 
<body> 
<table HEIGHT="100%" WIDTH="100%" BORDER="1"> 
<tr> 
<td WIDTH="200" BGCOLOR="#FFFFFF"> 
some text 
</td> 
<td WIDTH="250" CLASS="bg2"> 
some more text 
</td> 
</tr> 
</table> 
</body> 
</html> 


3. Save the file and view it in your browser. The cell on the right calls the bg2 class you 
defined in the style sheet and should display the background image, tiled horizontally. 


ay 5-8: Create a Complex Background with Multiple 
Filters 


Each filter lets you create many different effects. When you combine different filters you can 
create thousands of effects. Combine two filters to create a fire and smoke background. 


Complete these steps: 
1. In Photoshop, create a 200 X 200 pixel image. 
2. Set the Background color to black and the Foreground color to red. 


3. Click Filter on the menu bar, point to Render, and then click Clouds. You 
should see a black background with red clouds. Run the filter a few more times 
to try different random patterns. 


4. Use the Offset filter to preview the seams of the image. 


5. Select the Smudge tool, select one of the specialty spatter brushes, and gently smudge 
away the seams. Use the Blur tool to further reduce the appearance of edges. 


6. Click Filter on the menu bar, point to Artistic, and then click Plastic Wrap. Set 
the Highlight Strength to 10, the Detail to 10, and the Smoothness to 5. 
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7. Click OK. You should see a fiery red and black background with wispy white smoke. 


8. Reduce the contrast, optimize and save the image as weird.jpg in a new folder 
named project_5-8. 


9. Copy bg-test.html to the folder, edit it to use this new image, and preview it 
in a browser. 


CASE PROJECT 


folio. On at least one page, use a background image in the body of the page, setting the 
style sheet so that the image tiles vertically, but not across. On another page, use a back- 
ground image in a table. Both background images should have reduced contrast so that 
text that appears over the image can be easily read. 


A| Add background images and colors to the pages you’ve completed so far for your port- 


